<script lang="ts" setup>
defineProps<{
  title: string
}>()

const cls = 'com-home-card'
</script>

<template>
  <div :class="cls">
    <header :class="`${cls}_header`">{{ title }}</header>
    <div :class="`${cls}_main`">
      <slot></slot>
    </div>
  </div>
</template>

<style lang="scss">
.com-home-card {
  flex: 1;
  height: 0;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  &_header {
    padding: $page-padding;
    color: var(--el-text-color-primary);
    border-bottom: 1px solid var(--el-border-color-lighter);
  }
  &_main {
    flex: 1;
    height: 0;
    > * {
      height: 100%;
    }
  }
}
</style>
